<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="groupName" label="群组名称">
            </el-table-column>
            <el-table-column prop="nodeNums" label="传感器节点">
            </el-table-column>
            <el-table-column prop="onlineNums" label="在线设备">
            </el-table-column>
            <el-table-column prop="cTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="amend(scope.row.id, scope.row.groupName)" type="text" size="small">重命名</el-button>
                    <el-button @click="del(scope.row.id, scope.$index)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page_box">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageObj.currPage" :page-sizes="[3, 5, 10, 15]" :page-size="pageObj.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { $DelGroup } from '@/api'
// import PageFnMixin from "@/mixins/PageFnMixin"
import { defineComponent, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'



export default defineComponent({
    name: 'GroudTable',
    props: ['tableData', 'total', 'pageObj', 'getData','delFn'],
    // mixins:[PageFnMixin],
    setup(props) {
        const pageSize: any = ref()
        function del(id: any, $index:any) {
            ElMessageBox.confirm(
                'proxy will permanently delete the file. Continue?',
                'Warning',
                {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
            ).then(() => {
                $DelGroup({ id: id }).then(res => {
                    if (res.data.msg == 'success') {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        props.delFn($index)
                        // this.$parent.pageObj.currPage = 1;
                        // this.$parent.getData()
                    }
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: 'Delete canceled',
                })
            })
        }
        // 修改
        function amend(id: any, name: any) {
            // let groupObj = {
            //     editId: id,
            //     groupName: name
            // }
            // this.$emit('editFn', groupObj)
        }
        // 每页多少条
        function handleSizeChange(size: number) {
             pageSize.value = size
            props.getData({ pageSize: size, currPage: 1 })
            // this.$parent.pageObj.pageSize = size;
            // this.$parent.pageObj.currPage = 1;
            // this.$parent.getData();
        }
        // 当前页
        function handleCurrentChange(page: number) {
            props.getData({ currPage: page, pageSize: pageSize.value })
            // this.$parent.pageObj.currPage = page;
            // this.$parent.getData();
        }
        return { del, amend, handleSizeChange, handleCurrentChange }
    }
});
</script>

<style lang="less" scoped>
.page_box {
    text-align: center;
    background: #fff;
    padding: 10px 0;
}
</style>